<template>
  <div>

    <!-- vant导航栏 -->
    <van-nav-bar style="background-color: orangered;">

      <template #left>
        <van-icon @click="back" color="white" name="arrow-left" />
      </template>

      <template #title>
        <span style="color: white;">新用户注册</span>
      </template>

    </van-nav-bar>

    <!-- vant表单 -->
    <van-form validate-first  @failed="check">
      <van-field
          v-model="form.username"
          name="邮箱"
          label="邮箱"
          placeholder="邮箱"
          :rules="[{ required: true, message: '请填写邮箱' },{pattern:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ , message: '请输入正确的邮箱'}]"
      />
      <van-field
          v-model="form.code"
          name="验证码"
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' },{pattern: /^\w{6,}$/,message:'密码不少于6位'}]"
      >
        <template #button>
          <van-button size="small" color="orangered" type="primary" @click="check()">发送验证码</van-button>
        </template>
      </van-field>
      <van-field
          v-model="form.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' },{pattern: /^\w{6,}$/,message:'密码不少于6位'}]"
      >

      </van-field>
      <div style="margin: 16px;">
        <van-button  round block color="orangered" type="primary" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>

    <div style="float: right;">
      <router-link to="/login">立即登录</router-link>
    </div>

  </div>

</template>

<script>
import { Toast } from 'vant';
export default{
  name:'register',
  data(){
    return{
      form:{
        username:'',
        password:'',
        code:'',
      },
    }
  },
  methods:{
    check(){
      // if (this.form.username!==/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ ){
        console.log("errorInfo")
      // }
    },
    // onSubmit(){ //点击注册
    //   // 如果不符合注册条件则不会继续执行
    //   if(this.username.trim() === ''){
    //     return
    //   }
    //
    //   if(!this.password.match(/^\w{6,}$/)){
    //     return
    //   }
    //
    //   // 1.获取localstorage的数据
    //   let users = localStorage.users
    //   if(users){
    //     users = JSON.parse(users)
    //   }else{
    //     users = []
    //   }
    //
    //   // 2.把新注册的用户信息添加到数组
    //   users.push({
    //     username:this.username,
    //     password:this.password
    //   })
    //
    //   // 3.保存到本地
    //   localStorage.users = JSON.stringify(users)
    //
    //   Toast.success('注册成功');
    //
    //   setTimeout(()=>{ //一秒后跳转登录页面
    //     this.$router.push({
    //       path:'/login'
    //     })
    //   },1000)
    //
    // },
    back(){ //返回上一级
      window.history.back()
    }
  }
}
</script>

<style scoped>

</style>